import React, { useState } from "react";
import { Popover, Modal, Table } from "antd";
import { useTranslation } from "react-i18next";
import {
  text_check,
  online_type,
  get_interval_date,
  format_time,
  post_axios,
} from "../../utils";
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  WarningOutlined,
} from "@ant-design/icons";
export default function OnlineIconTemp(props) {
  const { avm_msg, local_company_object } = props;
  const { online } = avm_msg;
  const { t } = useTranslation();
  const [online_history_show, setOnline_history_show] = useState(false);
  const [online_history_list, setOnline_history_list] = useState([]);
  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);

  const online_click = async () => {
    let upMsg = {
      page: page,
      rows: rows,
      bdate_stamp: new Date(get_interval_date(-90, "-")).getTime(),
      edate_stamp: new Date().getTime(),
      avm: avm_msg.avm,
      company_id: local_company_object.id,
      company: local_company_object.company,
    };
    let res = await post_axios("avm_status", "m_query_online_his", upMsg);
    if (!res) return;
    setOnline_history_list(res.data_rows.rows);
    setTotal(res.data_rows.total);
    setOnline_history_show(true);
  };
  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    online_click();
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("temp.event_type"),
      dataIndex: "event_type",
      align: "center",
    },
    {
      title: t("temp.channel_id"),
      dataIndex: "channel_id",
      align: "center",
    },

    {
      title: "IP",
      dataIndex: "ip",
      align: "center",
    },
    {
      title: t("operate.time"),
      align: "center",
      width: 100,
      render: (_, record) => (
        <>{record.op_time ? format_time(record.op_time, "time") : ""}</>
      ),
    },
  ];

  return (
    <>
      {online === "1" ? (
        <span className="icon_style" onClick={online_click}>
          <Popover
            placement="bottomLeft"
            content={<div>{text_check(online_type["1"])}</div>}
          >
            <CheckCircleOutlined
              style={{ fontSize: "1.5em", color: "green" }}
            />
          </Popover>
        </span>
      ) : online === "0" ? (
        <span className="icon_style" onClick={online_click}>
          <Popover
            placement="bottomLeft"
            content={<div>{text_check(online_type["0"])}</div>}
          >
            <CloseCircleOutlined
              style={{ fontSize: "1.5em", color: "rgb(245,251,10)" }}
            />
          </Popover>
        </span>
      ) : (
        <span className="icon_style" onClick={online_click}>
          <Popover
            placement="bottomLeft"
            content={<div>{text_check(online_type["9"])}</div>}
          >
            <WarningOutlined style={{ fontSize: "1.5em", color: "red" }} />
          </Popover>
        </span>
      )}

      <Modal
        title={t("temp.network_history")}
        open={online_history_show}
        onCancel={() => setOnline_history_show(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Table
          dataSource={online_history_list}
          size="small"
          bordered
          columns={columns}
          rowKey="id"
          virtual
          scroll={{
            y: 300,
          }}
          pagination={{
            defaultCurrent: page,
            defaultPageSize: rows,
            size: "small",
            current: page,
            total: total,
            responsive: true,
            showTotal: (total) =>
              text_check({
                msg_cn: `共 ${total} 条`,
                msg_en: `Total ${total} items`,
              }),
            onChange: pageOnChange,
          }}
        />
      </Modal>
    </>
  );
}
